<template>
    <div id="form_designer_app">
        <fc-designer ref="designer" style="height: 100vh;"/>
    </div>
</template>

<script>
import {selectById} from '../form/api'
export default {
    name: 'FormDesigner',
    data() {
      return {
      };
    },
    computed: {
        formId() {
            // 两个设计器(任务设计器、表单设计器)同时监听冲突???????????
            return this.$route.query.id;
        }
    },
    watch: {
        formId:{
            async handler(nVal) {
                if (!nVal)  return ;
                await this.$store.commit("form/setParamFormId", nVal);
                await this.init();
            },
            immediate: true
        }
    },
    mounted() {
    },
    methods: {
        async init() {
            if (this.$store.state.form.paramFormId==undefined) {
                console.log('this.$store.state.form.paramFormId:'+this.$store.state.form.paramFormId)
                console.log('this.formId:'+this.formId)
                return;
            }
            const result = await selectById({"id":this.$store.state.form.paramFormId})
            if (!result.success) {
                this.notify(result)
                return
            }

            //const data = JSON.parse(result.obj.formData)
            const rule = result.obj.rule
            const option = result.obj.option
            //console.log(rule)
            //const option = data.option
            this.$refs.designer.setRule(rule);
            this.$refs.designer.setOption(JSON.parse(option));
        },

    },
};


</script>

<style>

</style>
